<template>
	<!-- 结算 -->
	<view id="closeacc">
		<!-- 身 -->
		<view class="closeacc_main">
			<!-- 导航按钮 -->
			<view class="button">
				<view class="model_box" :class="{ active: activeNumber === 0 }" @click="takeOut">外卖配送</view>
				<view class="model_box" :class="{ active: activeNumber === 1 }" @click="askFor">到店自取</view>
			</view>
			<!-- 内容 -->
			<!-- 外卖 -->
			<view class="main takeOut" :class="{ displayBlock: displayBlock === 0 }">
				<!-- 订单循环 -->
				<view class="main_card" v-for="(item,id) in mainCard" :key="id">
					<!-- 头部 -->
					<view class="main_card_view main_card_header">
						<image :src="item.headerImg" />
						<view>{{ item.headerNmae }}</view>
						<image src="../../static/images/cut@2x.png" />
					</view>
					<!-- 主体 -->
					<view class="main_card_view main_card_main" >
						<view class="main_card_main_copy" v-for="(item,index) in item.mainCardCopy" :key="index">
							<image :src="item.mainImg" />
							<view class="main_card_main_copy_text">{{ item.text }}</view>
							<view class="last">
								<view>{{ item.price }}</view>
								<view>{{ item.num }}</view>
							</view>
						</view>
						<!-- 配送费 -->
						<view class="main_card_main_shippingFee">
							<text>配送费</text>
							<text>￥1.50</text>
						</view>
					</view>
					<!-- 页脚 -->
					<view class="main_card_view main_card_footer">
						<text>实付款</text>
						<view>
							￥
							<text>{{ item.footerPrice }}</text>
						</view>
					</view>
				</view>
				<!-- 信息循环 -->
				<!-- 配送地址 -->
				<view class="main_box">
					<view class="main_box_top">配送地址</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left">
							<view>用户名：111</view>
							<view>成都市</view>
						</view>
						<view class="main_box_bottom_right">
							<image src="../../static/images/cut@2x.png" />
						</view>
					</view>
				</view>
				<!-- 使用红包 -->
				<view class="main_box">
					<view class="main_box_top">使用红包</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left redPacket">
							<view>现金红包</view>
						</view>
						<view class="main_box_bottom_right">￥20.00</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="main_box">
					<view class="main_box_top">备注</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left input">
							<input placeholder="请输入备注信息" />
						</view>
					</view>
				</view>
			</view>
			<!-- 自取 -->
			<view class="main askFor" :class="{ displayBlock: displayBlock === 1 }">
				<!-- 订单循环 -->
				<view class="main_card" v-for="(item,id) in mainCard" :key="id">
					<!-- 头部 -->
					<view class="main_card_view main_card_header">
						<image :src="item.headerImg" />
						<view>{{ item.headerNmae }}</view>
						<image src="../../static/images/cut@2x.png" />
					</view>
					<!-- 主体 -->
					<view class="main_card_view main_card_main">
						<view class="main_card_main_copy" v-for="(item,index) in item.mainCardCopy" :key="index">
							<view>
								<image :src="item.mainImg" />
								<view class="main_card_main_copy_text">{{ item.text }}</view>
								<view class="last">
									<view>{{ item.price }}</view>
									<view>{{ item.num }}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 页脚 -->
					<view class="main_card_view main_card_footer">
						<text>实付款</text>
						<view>
							￥
							<text>{{ item.footerPrice }}</text>
						</view>
					</view>
				</view>
				<!-- 信息循环 -->
				<!-- 配送地址 -->
				<view class="main_box">
					<view class="main_box_top">配送地址</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left">
							<view>用户名：111</view>
							<view>成都市</view>
						</view>
						<view class="main_box_bottom_right">
							<image src="../../static/images/cut@2x.png" />
						</view>
					</view>
				</view>
				<!-- 使用红包 -->
				<view class="main_box">
					<view class="main_box_top">使用红包</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left redPacket">
							<view>现金红包</view>
						</view>
						<view class="main_box_bottom_right">￥20.00</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="main_box">
					<view class="main_box_top">备注</view>
					<view class="main_box_bottom">
						<view class="main_box_bottom_left input">
							<input placeholder="请输入备注信息" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 页脚 -->
		<view class="closeacc_footer">
			<view class="closeacc_footer_price">总计：<text>￥310.40</text></view>
			<view class="closeacc_footer_discounts">
				<view>已优惠￥0</view>
				<view>红包：20.00</view>
			</view>
			<view class="closeacc_footer_button">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeNumber: 0, //外卖自取按钮
				displayBlock: 0, //外卖自取身体显示隐藏
				// 订单循环
				mainCard: [{
						id: 0,
						headerImg: '../../static/images/store_image@2x.png',
						headerNmae: '李大爷店铺',
						mainCardCopy: [{
							mainImg: '../../static/images/store_image@2x.png',
							text: '两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏',
							price: '￥109.2',
							num: '×2',
						}, ],
						footerPrice: 332.2,
					},
					{
						id: 1,
						headerImg: '../../static/images/store_image@2x.png',
						headerNmae: '李大爷店铺',
						mainCardCopy: [{
								mainImg: '../../static/images/store_image@2x.png',
								text: '两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏',
								price: '￥109.2',
								num: '×2',
							},
							{
								mainImg: '../../static/images/store_image@2x.png',
								text: '两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏两行超出隐藏',
								price: '￥109.2',
								num: '×2',
							},
						],
						footerPrice: 332.2,
					},
				],
			}
		},
		methods: {
			// 点击外卖导航按钮身体显示隐藏
			takeOut() {
				this.activeNumber = 0;
				this.displayBlock = 0;
			},
			// 自取
			askFor() {
				this.activeNumber = 1;
				this.displayBlock = 1;
			},
		}
	}
</script>

<style lang="less" scoped>
	#closeacc {
		background: #ededed;
		display: flex;
		flex-direction: column;
		height: 100%;

		// 身
		.closeacc_main {
			flex: 1;
			height: 100%;
			overflow-y: scroll;

			/* 导航按钮 */
			.button {
				width: 320rpx;
				background: #fff;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 18rpx 0 20rpx 0;
				border-radius: 28rpx;
				margin-left: 20rpx;

				.model_box {
					width: 160rpx;
					height: 40rpx;
					color: #69d173;
					font-size: 28rpx;
					padding: 0 24rpx;
				}

				.active {
					height: 56rpx;
					width: 160rpx;
					border-radius: 28rpx;
					color: #fff;
					font-size: 28rpx;
					background: #14d127;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			// 主体
			.main {
				display: none;

				/* 订单循环 */
				.main_card {
					background: #fff;
					border-radius: 10rpx;
					margin: 0 20rpx;
					margin-bottom: 20rpx;

					.main_card_view {
						border-bottom: 1px solid #efecf0;
					}

					/* 头部 */
					.main_card_header {
						display: flex;
						align-items: center;
						padding: 20rpx;

						image:first-child {
							width: 80rpx;
							height: 80rpx;
						}

						view {
							color: #333;
							font-size: 34rpx;
							font-weight: bold;
							padding: 0 20rpx;
						}

						image:last-child {
							width: 14rpx;
							height: 26rpx;
						}
					}

					/* 主体 */
					.main_card_main {
						padding: 0 20rpx;
						padding-bottom: 20rpx;

						.main_card_main_copy {
							display: flex;
							padding-top: 20rpx;

							image {
								width: 64rpx;
								height: 64rpx;
							}

							.main_card_main_copy_text {
								flex: 1;
								padding: 0 20rpx;
								color: #333;
								font-size: 24rpx;
								font-weight: 400;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}

							.last {
								text-align: right;
								font-size: 20rpx;
								color: #333;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								view:last-child {
									color: #999;
									font-weight: bold;
								}
							}
						}

						// 配送费
						.main_card_main_shippingFee {
							color: #333;
							font-size: 24rpx;
							padding-top: 20rpx;
							display: flex;
							justify-content: space-between;
						}
					}

					/* 页脚 */
					.main_card_footer {
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							color: #333;
							font-weight: 400;
							font-size: 28rpx;
						}

						view {
							font-size: 20rpx;

							text {
								color: #fc6738;
								font-weight: bold;
								font-size: 28rpx;
							}
						}
					}
				}

				// 信息循环
				.main_box {
					background: #fff;
					border-radius: 10rpx;
					margin: 0 20rpx;
					margin-bottom: 20rpx;

					.main_box_top {
						color: #333;
						font-size: 34rpx;
						font-weight: bold;
						padding: 16rpx 20rpx;
						border-bottom: 2rpx solid #f0edf1;
					}

					.main_box_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx;

						.main_box_bottom_left {
							view {
								padding-top: 12rpx;
								color: #333;
								font-size: 28rpx;
							}

							view:nth-child(2) {
								font-size: 34rpx;
								font-weight: bold;
								padding-bottom: 12rpx;
							}
						}

						.redPacket {
							padding: 20rpx 0;

							view {
								padding: 0;
								font-size: 32rpx;
								color: #000;
							}
						}

						.input {
							width: 100%;

							input {
								width: 100%;
								padding: 20rpx 0;
								font-size: 24rpx;
							}
						}

						.main_box_bottom_right {
							image {
								width: 18rpx;
								height: 34rpx;
							}
						}
					}
				}
			}

			.displayBlock {
				display: block;
			}
		}

		// 页脚
		.closeacc_footer {
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// 提交订单
			.closeacc_footer_price {
				font-size: 34rpx;
				color: #28c84d;
				padding-left: 20rpx;

				text {
					font-weight: bold;
				}
			}

			.closeacc_footer_discounts {
				font-size: 20rpx;
				color: #28c84d;
				flex: 1;
				padding-left: 20rpx;
			}

			.closeacc_footer_button {
				width: 206rpx;
				height: 80rpx;
				border-radius: 10px;
				background: #14d127;
				color: #fff;
				margin: 8rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>
